<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>align-content</title>
         <!-- 设置标题栏中标题之前的小图标 -->
        <link rel="shortcut icon" href="kfm.jpg" type="image/x-icon">
        <!-- 链接外部样式文件 -->
        <link rel="stylesheet" href="common.css">
        <link rel="stylesheet" href="align-content.css">
    </head>
    <body>

        <h3>align-content</h3>

        <div class="wrapper">
            <p class="title">row nowrap / space-between / align-content: stretch</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container first">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row wrap; / space-between / align-content: stretch</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container second">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
                <span class="flex-item">宇</span>
                <span class="flex-item">宙</span>
                <span class="flex-item">洪</span>
                <span class="flex-item">荒</span>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row nowrap / space-between / align-content: center</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container third">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
                <span class="flex-item">宇</span>
                <span class="flex-item">宙</span>
                <span class="flex-item">洪</span>
                <span class="flex-item">荒</span>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row wrap / space-between / align-content: center;</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container fourth">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
                <span class="flex-item">宇</span>
                <span class="flex-item">宙</span>
                <span class="flex-item">洪</span>
                <span class="flex-item">荒</span>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">column wrap / space-between / align-content: center;</p>
            <p class="desc">主轴: 垂直从上到下 / 交叉轴: 水平从左到右 </p>
            <div class="flex-container fifth">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
                <span class="flex-item">宇</span>
                <span class="flex-item">宙</span>
                <span class="flex-item">洪</span>
                <span class="flex-item">荒</span>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">row wrap / space-between / align-content: space-between;</p>
            <p class="desc">主轴: 水平从左到右 / 交叉轴: 垂直从上到下 </p>
            <div class="flex-container sixth">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
                <span class="flex-item">宇</span>
                <span class="flex-item">宙</span>
                <span class="flex-item">洪</span>
                <span class="flex-item">荒</span>
            </div>
        </div>

        <div class="wrapper">
            <p class="title">column wrap / space-between / align-content: space-between;</p>
            <p class="desc">主轴: 垂直从上到下 / 交叉轴: 水平从左到右 </p>
            <div class="flex-container seventh">
                <div class="flex-item">天</div>
                <div class="flex-item">地</div>
                <div class="flex-item">玄</div>
                <div class="flex-item">黄</div>
                <span class="flex-item">宇</span>
                <span class="flex-item">宙</span>
                <span class="flex-item">洪</span>
                <span class="flex-item">荒</span>
            </div>
        </div>

    </body>
</html>